<template>
	<div>
		<div class="big-center">
			<div class="center">
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="top-left">
							<div class="logoname">{{ $t('dianpu.Welcome') }}</div>
							<div class="logins">
								<span v-if="!userId" @click="goAbute('/login')">{{ $t('dianpu.LogIn') }}</span>
								<span v-if="!userId" class="xian">|</span>
								<span v-if="!userId" @click="goAbute('/login?navgatorIndex=3')">{{$t('dianpu.registration')}}</span>
								<span v-if="userId" @click="quit()">{{$t('head.searchLogOut')}}</span>
							</div>
						</div>
					</el-col>
					<el-col :span="5">
						<div class="kong"></div>
					</el-col>
					<el-col :span="11">
						<div class="top-right">
							<span @click="goAbute('/?index=0')">{{$t('head.searchHomePage')}}</span>
							<span @click="goShoppingCar('/order')">{{$t('head.searchPersonalCenter')}}</span>
							<span>
								<span @click="goChat()" class="el-dropdown-link" style="color: #999;">
									{{$t('dianpu.contact')}}
								</span>
							</span>
							<span>
								<el-dropdown @command="handleCommand">
									<span class="el-dropdown-link" style="color: #999;">
										{{$t('dianpu.siteNavigation')}}<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<div style="width: 200px;display: inline-block;">
											<el-dropdown-item v-for="(item, index) in list" :key="index"
												:command="item.url">{{ item.name }}</el-dropdown-item>
										</div>
									</el-dropdown-menu>
								</el-dropdown>
							</span>
							<span>
								<el-dropdown>
									<span class="el-dropdown-link" style="color: #999;">
										{{$t('dianpu.MobileVersion')}}<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item>
											<img src="../../assets/foot/app.png" />
										</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</span>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>

		<div class="big-centers">
			<div class="center">
				<div class="cons left">
					<div class="company">{{ storeName }}</div>
					<div style="display: flex;color: #999897;margin-top: 5px;display: flex;align-items: center">
						<span>{{$t('dianpu.integrated')}}</span>
						<el-rate v-model="rateNum" disabled :colors="colors"></el-rate>
					</div>
				</div>
				<div class="flex">
					<div class="guanzhu" @click="guanzhu">
						<img src="../../assets/head/guanzhu.png" style="width: 22px;height: 20px;" alt="">
						<div>{{ shoucangMessage }}</div>
					</div>
					<!--					<div class = "shu"></div>-->
					<!--					<div class = "guang"><img src = "../../assets/head/erweima.png" alt = ""> <div-->
					<!--						style = "margin-left: 5px;">手机逛</div></div>-->
				</div>
				<div class="cons cont">
					<div class="searchs" @click="goAbute('/productList')">
						<el-input placeholder="请输入内容" v-model="value" class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="sousuo()">{{$t('head.searchText')}}</el-button>
						</el-input>
					</div>
				</div>
				<div class="cons right">
					<div class="myCars">
						<div>
							<img class="carimg" src="../../assets/head/card.png" />
							<span class="myCar" @click="goShoppingCar('/shoppingCar')">{{$t('head.searchMyShoppingCart')}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tong three">
			<div class="navList2">
				<div v-for="(item, index) in classList1" :key="index" :class="index == active1 ? 'active1' : ''"
					class="navName1" @click="classOn1(index, item)">
					{{ item.title }}</div>
			</div>
		</div>
		<div class="tong three">
			<goodsItem :data="dataList.content"></goodsItem>
		</div>
		<div class="tong three" v-if="dataList.content.length != 0">
			<el-pagination background style="text-align: center;padding-bottom: 50px;" layout="prev, pager, next"
				:total="dataList.totalElements" @current-change="handleCurrentChange" :current-page="page"
				:page-size="size">
			</el-pagination>
		</div>
		<div class="emptyWrap" v-if="dataList.content.length == 0">
			<img src="../../../static/images/empty.png" alt="">
			<div style="">{{$t('dianpu.NoContentForThe')}}</div>
		</div>

	</div>
</template>

<script>
import goodsItem from "../../components/goods-item";
export default {
	components: {
		goodsItem
	},
	data() {
		return {
			searchList: ['粽子', '防晒霜', '洗衣液', '蚊香液', '抽纸', '零食'],
			navList1: ['综合', '销量', '超低价'],
			active1: 0,
			rateNum: 3,
			colors: ['#FF2D55', '#FF2D55', '#FF2D55'],
			value: '',
			shoucangMessage: '关注',
			list: [
				{ name: '热卖榜单', url: '/?index=1' },
				{ name: '精选好物', url: '/?index=2' },
				{ name: '每日上线', url: '/?index=3' },
				{ name: '拼团购', url: '/?index=4' },
				// { name:'个人中心', url:'/order' },
			],
			dataList: [],
			storeId: '',
			storeName: '',
			TypeList: [],
			page: 0,
			size: 10,
			sort: 'createAt',
			storeTypeId: '',
			title: '',
			pinfen: 0,
			classList1: [
				{
					title: '默认排序',
					type: 'createAt'
				},
				{
					title: '销量',
					type: 'sales'
				},
				// {
				// 	title: '佣金',
				// 	type: 'commissionPrice'
				// },
				{
					title: '超低价',
					type: 'price'
				}
			],
			id: '',
			guanzhuIndex: 1,
		}
	},
	created() {
		this.storeId = this.$route.query.storeId
		this.storeName = this.$route.query.storeName

		this.getDataList()
		this.getDianpuDet(this.storeId)

		this.checkShoucang()
	},
	mounted() {
		// console.log(this.$cookie.get('userId'))
		// this.userId = this.$cookie.get('userId')
	},
	computed: {
		userId() {
			// return this.$store.state.userId
			return this.$cookie.get('userId')
		},
	},
	methods: {
		guanzhu() {
			if (this.guanzhuIndex === 0) {
				return;
			}
			if (this.shoucangMessage == '关注') {
				this.guanzhuIndex = 0;
				this.$http({
					url: this.$http.adornUrl('selfStoreCollect/save'),
					method: 'post',
					data: this.$http.adornParams({
						logo: '',
						storeId: this.storeId,
						storeName: this.storeName,
						userId: this.userId,
					})
				}).then(({ data }) => {
					if (data.status == 0) {
						this.checkShoucang();
						// this.getCount(this.storeId);
						this.guanzhuIndex = 1;
					}
				})
			} else {
				this.guanzhuIndex = 0;
				this.$confirm('您确认要取关此店铺吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('/selfStoreCollect/delete?id=' + this.id),
						method: 'get',
						params: this.$http.adornParams({})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.checkShoucang();
							// this.getCount(this.storeId);
							this.guanzhuIndex = 1;
						}
					})
				}).catch(() => {

				});
			}
		},
		classOn1(index, item) {
			this.active1 = index
			this.sort = item.type
			this.getDataList()
		},
		getDataList() {
			this.$http({
				url: this.$http.adornUrl('/goods/userList?page=' + this.page + '&size=' + this.size + '&storeId=' + this.storeId +
					'&sort=' + this.sort + '&storeTypeId=' + this.storeTypeId + '&title=' + this.title),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.dataList = data.data
				}
			})
		},
		getDianpuDet(id) {
			this.$http({
				url: this.$http.adornUrl('/self/store/find?id=' + id),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.pinfen = data.data.score;
					this.rateNum = this.pinfen / 20
				}
			})
		},
		checkShoucang() {
			this.$http({
				url: this.$http.adornUrl('/selfStoreCollect/check?storeId=' + this.storeId + '&userId=' + this.userId),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					if (!data.data) {
						this.id = data.msg;
						this.shoucangMessage = '已关注'
					} else {
						this.shoucangMessage = '关注'
					}
				}
			})
		},

		handleCurrentChange(val) {
			this.page = val
		},
		goShoppingCar(url) {
			if (this.userId) {
				this.$router.push({
					path: url
				})
			} else {
				this.$router.push({
					path: '/login'
				})
			}
		},
		goHome() {
			if (this.$route.path == '/') {

			} else {
				this.$router.push({
					path: '/'
				})
			}

		},
		goAbute(url) {
			this.$router.push({
				path: url
			})
		},
		goChat() {
			if (this.userId) {
				this.$http({
					url: this.$http.adornUrl('/chat/save'),
					method: 'post',
					data: this.$http.adornData({
						storeHead: "地摊兄自营店铺",
						storeId: "0",
						storeName: "",
						userId: this.$cookie.get('userId'),
						userName: this.$cookie.get('nickName'),
					})
				}).then(({ data }) => {
					let returnData = data.data;
					this.$router.push({
						path: '/vueMchat?chatId=' + returnData.chatId
					})
				})
			} else {
				this.$router.push({
					path: '/login'
				})
			}
		},
		handleCommand(command) {
			this.$router.push({
				path: command
			})
		},
		sousuo() {
			if (this.value == '') {
				this.$message('搜索内容不能为空')
			}
			this.getDataList()
		},
		//退出登录
		quit() {
			this.$store.commit('updateUserId', '')
			this.$store.commit('updateRelationId', '')

			this.$cookie.set('uuid', '')
			this.$cookie.set('userId', '')
			this.$cookie.set('relationId', '')
			this.$cookie.set('image_url', '')
			this.$cookie.set('nickName', '')
			this.$cookie.set('phone', '')
			console.log(this.$route.path, '当前页路由')
			if (this.$route.path == '/') {
				this.$router.go(0)
			} else {
				this.$router.push({
					path: '/'
				})
			}

		}

	}

}
</script>

<style scoped>
.company {
	font-size: 24px;
	color: #333332;
	font-weight: 600;
}

.flex {
	display: flex;
	/*width: 220px;*/
	justify-content: space-between;
	align-items: center;
}

.guanzhu {
	/*width: 90px;*/
	/*height: 36px;*/
	background: #ffffff;
	border: 2px solid #ff2d55;
	color: #ff2d55;
	padding: 5px 10px;
	font-weight: 500;
	font-size: 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.guanzhu div {
	margin-left: 5px;
}

.shu {
	width: 1px;
	height: 27px;
	border: 1px solid #ff2d55;
	background: #ff2d55;
}

.guang {
	font-size: 20px;
	color: #ff2d55;
	font-weight: 400;
	/*line-height: 27px;*/
	display: flex;
}


.big-center {
	width: 100%;
	height: 24px;
	line-height: 24px;
	color: #999;
	font-size: 14px;
	background: #E6E6E6;
}

.center {
	width: 1200px;
	margin: 0 auto;
}

.top-left {
	text-align: left;

}

.top-left div {
	display: inline-block;
}

.logoname {
	width: 40%;
}

.logins {
	width: 50%;
	text-align: center;
}

.logins span {
	color: #999;
	text-decoration: none;
}

.logins span:hover {
	color: #FF0D18;
	cursor: pointer;
}

.xian {
	margin: 0 10px;
}

.kong {
	width: 100%;
	height: 24px;
}

.top-right {
	text-align: right;
}

.top-right span {
	display: inline-block;
	margin-left: 20px;
	color: #999;
	text-decoration: none;
}

.top-right span:hover {
	color: #FF0D18;
	cursor: pointer;
}

.big-centers {
	width: 100%;
	height: 120px;
	/* line-height: 120px; */
	background: #fff;
}

.big-centers .center .cons {
	display: inline-block;
}

.big-centers .center {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 120px;
}

.left {
	width: 24%;
	text-align: left;
}

.left img {
	position: relative;
	bottom: 6px;
}

.cont {
	width: 400px;
}

.searchs {
	/*padding-top: 26px;*/
}

.search-list {
	text-align: left;
	font-size: 14px;
	color: #999;
	margin-top: 10px;
}

.search-list div {
	display: inline-block;
	width: 16%;
	cursor: pointer;
}

.one {
	color: #FF0D18;
}

.one .re {
	display: inline-block;
	font-size: 12px;
	border: 1px solid #FF0D18;
	/* width: 14px;
		height: 14px; */
	border-radius: 2px;
	background: #FFC1C1;
	padding: 0 2px;
	/* margin-right: 6px; */
}

.right {
	width: 12%;
	text-align: right;
	color: #FF2D55;
	font-size: 18px;
}

.myCars {
	/*position: relative;*/
	/*bottom: 20px;*/
	border: 2px solid #FF2D55;
	border-radius: 4px;
	/*width: 100%;*/
	text-align: center;
	height: 45px;
	line-height: 45px;
	/*margin-left: 35%;*/
	cursor: pointer;
}

.carimg {
	position: relative;
	top: 3px;
}

.tong {
	width: 1200px;
	margin: 0 auto;
	margin-top: 15px;
}

/* 第三部分 */
.navList2 {
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	color: #333;
	background: #fff;
	border-radius: 2px;
}

.navName1 {
	display: inline-block;
	width: 16.66%;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
}

.active1 {
	background: #FF2D55;
	color: #fff;
}
</style>
